// 监听浏览器大小改变刷新页面 防止样式混乱
$(window).bind('resize', function (e) {
    if (window.RT) clearTimeout(window.RT);
    window.RT = setTimeout(function () {
        this.location.reload(false); /* false to get page from cache */
    }, 200);
});

//自调用函数
(function () {
    // 1、页面一加载就要知道页面宽度计算
    var setFont = function () {
        // 因为要定义变量可能和别的变量相互冲突，污染，所有用自调用函数
        var html = document.documentElement;// 获取html
        // 获取宽度
        var width = html.clientWidth;

        // 判断
        if (width < 875) width = 875
        if (width > 1920) width = 1920
        // 设置html的基准值
        var fontSize = width / 80 + 'px';
        // 设置给html
        html.style.fontSize = fontSize;
    }
    setFont();
    // 2、页面改变的时候也需要设置
    // 尺寸改变事件
    window.onresize = function () {
        setFont();
    }
})();

//头部 时间
(function () {
    play();

    runing()

    function runing() {
        setInterval(play, 1000);
    }

    function play() {

        var d1 = new Date();
        var y = d1.getFullYear();
        var m = ('0' + (d1.getMonth() + 1)).slice(-2);
        var d = ('0' + d1.getDate()).slice(-2);
        var h = d1.getHours();

        var i = ('0' + d1.getMinutes()).slice(-2);
        var s = ('0' + d1.getSeconds()).slice(-2);



        var temp = y + '年' + m + '月' + d + '日 ' + ' ' + h + ':' + i + ':' + s;

        document.getElementById('year').innerHTML = temp;
    }
})();


(function () {
    //事件委托
    $('.monitor').on('click', ' a', function () {
        //点击当前的a 加类名 active  他的兄弟删除类名
        $(this).addClass('active').siblings().removeClass('active');
        //获取一一对应的下标 
        var index = $(this).index();
        //选取content 然后狗日对应下标的 显示   当前的兄弟.content隐藏
        $('.content').eq(index).show().siblings('.content').hide();
    });
    //滚动
    //原理：把marquee下面的子盒子都复制一遍 加入到marquee中
    //      然后动画向上滚动，滚动到一半重新开始滚动
    //因为选取的是两个marquee  所以要遍历
    $('.monitor .marquee').each(function (index, dom) {
        //将每个 的所有子级都复制一遍
        var rows = $(dom).children().clone();
        //再将新的到的加入原来的
        $(dom).append(rows);
    });

})();

// 当日订单额
(function () {

    var task = [
        [{
            a: "张三",
            b: "308万",

        },
        {
            a: "李四",
            b: "118万",

        },
        {
            a: "王五",
            b: "410万",

        }],
        [{
            a: "赵六",
            b: "270万",

        },
        {
            a: "孙七",
            b: "107万",

        },
        {
            a: "钱八",
            b: "190万",

        }],
        [{
            a: "李九",
            b: "350万",

        },
        {
            a: "天一",
            b: "160万",

        },
        {
            a: "王二",
            b: "200万",

        }]
    ]

    var i = 0
    task[i].forEach((item, index) => {
        $('.monitor .inner .content .marquee-view .change').append(
            `  <div class="row"  style="color: #55EBED;">
                    <span class="col">${item.a}</span>
                    <span class="col">${item.b}</span>
                    <span class="icon-dot"></span>
                </div`)
    })
    var time = setInterval(function () {
        $('.monitor .inner .content .marquee-view .change').find('.row').remove()
        task[i].forEach((item, index) => {

            $('.monitor .inner .content .marquee-view .change').append(
                `  <div class="row"  style="color: #55EBED;">
                                <span class="col">${item.a}</span>
                                <span class="col">${item.b}</span>
                                <span class="icon-dot"></span>
                            </div`)
        })
        i++
        if (i == 3) {
            i = 0
        }

    }, 3000);
})();

//产品种类销售统计图
(function () {
    var myechart = echarts.init($('.pie')[0]);
    option = {
        // 大小是否包含文本【类似于boxsizing】
        containLabel: true,
        // 控制提示
        tooltip: {
            // 非轴图形，使用item的意思是放到数据对应图形上触发提示
            trigger: 'item',
            // 格式化提示内容：
            // a 代表图表名称 b 代表数据名称 c 代表数据  d代表  当前数据/总数据的比例
            formatter: "{a} <br/> {b} : {c}万 ({d}%)"
        },
        // 控制图表
        series: [
            {
                // 图表名称
                name: '产品种类',
                // 图表类型
                type: 'pie',
                selectedMode: 'single',
                // 南丁格尔玫瑰图 有两个圆  内圆半径10%  外圆半径70%
                // 百分比基于  图表DOM容器的半径
                radius: '93%',
                // 图表中心位置 left 50%  top 50% 距离图表DOM容器
                center: ['50%', '50%'],
                //控制引导文字位置
                label: {
                    position: 'inner',
                    formatter: '{b} {d}%',
                    rotate: -40,
                    textStyle: {
                        fontSize: '150%'   //文字的字体大小
                    },
                },

                // 引导线
                labelLine: {
                    show: false,
                    length: 8,
                    length2: 10
                },
                // 半径模式，另外一种是 area 面积模式
                // roseType: 'radius',
                // 数据集 value 数据的值 name 数据的名称
                data: [
                    { value: 3600, name: '300工程销售', selected: true },
                    { value: 1800, name: '600工程销售' },
                    { value: 2500, name: '318销售' },
                    { value: 3000, name: '477销售' },
                    { value: 2500, name: '悦尚销售' },
                    { value: 1000, name: '德尚销售' },
                    { value: 1000, name: '晾衣机销售' },
                    { value: 1000, name: '其他销售' },

                ],
            }
        ],
        color: ['#FDB301', '#F87127', '#648DFF', '#E75FC3', '#9B8BFF', '#2ED8F7',]
    };
    myechart.setOption(option);
})();

// 季度考核
(function () {
    // 中间省略的数据  准备三项
    // var item = {
    //     name: '',
    //     value: 120,
    //     // 柱子颜色
    //     itemStyle: {
    //         color: '#254065'
    //     },
    //     // 鼠标经过柱子颜色
    //     emphasis: {
    //         itemStyle: {
    //             color: '#254065'
    //         }
    //     },
    //     // 工具提示隐藏
    //     tooltip: {
    //         extraCssText: 'opacity:0'
    //     }
    // };
    option = {
        //标题文字颜色 大小
        legend: {
            textStyle: {
                color: '#FFFFFF',
            },
        },
        tooltip: {},
        // 图表边界控制
        color: ['#37A9FD', '#BF3EFF'],
        dataset: {
            dimensions: ['product', '金额', '目标'],
            source: [
                { product: '一组', '金额': 143.3, '目标': 185.8 },
                { product: '二组', '金额': 183.1, '目标': 73.4 },
                { product: '三组', '金额': 186.4, '目标': 165.2 },
                { product: '四组', '金额': 172.4, '目标': 153.9 },
                { product: '五组', '金额': 143.3, '目标': 185.8 },
                { product: '六组', '金额': 183.1, '目标': 173.4 },
                { product: '七组', '金额': 186.4, '目标': 165.2 },
                { product: '八组', '金额': 172.4, '目标': 153.9 },
                { product: '九组', '金额': 172.4, '目标': 153.9 },
                { product: '十组', '金额': 172.4, '目标': 153.9 },
                { product: '江苏大区', '金额': 152.4, '目标': 167.9 },
                { product: '贵州大区', '金额': 152.4, '目标': 167.9 },
                { product: '安徽大区', '金额': 152.4, '目标': 167.9 },
            ]
        },
        xAxis: {
            type: 'category',
            axisLabel: {
                interval: 0,
                rotate: -40,
                color: '#FFFFFF',
                fontSize: '100%'
            }
        },
        yAxis: {
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
                formatter: '{value}万',
                color: '#FFFFFF',
                fontSize: '100%'
            }
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
            { type: 'bar' },
            { type: 'bar' },
        ]
    };
    var myechart = echarts.init($('.bar')[0]);
    myechart.setOption(option);
})();

// 月度水球图 
(function () {
    var myChart = echarts.init(document.getElementById('waterChart'));
    var option = {
        textStyle: {
            fontWeight: 'normal',
            fontSize: 18,
            color: '#FFFFFF'
        },
        series: [{
            type: 'liquidFill',
            name: '', // 系列名称，用于tooltip的显示，legend 的图例筛选
            radius: '70%', // 水球图的半径
            data: [0.6],
            color: ['#00FFFF'],
            outline: {
                show: true,
                // borderDistance: 0, // 边框线与图表的距离 数字
                itemStyle: {
                    // opacity: 1, // 边框的透明度   默认为 1
                    borderWidth: 3, // 边框的宽度
                    shadowBlur: 1, // 边框的阴影范围 一旦设置了内外都有阴影
                    // shadowColor: '#fff', // 边框的阴影颜色,
                    borderColor: '#254387' // 边框颜色
                }
            },
            backgroundStyle: {
                color: '#052245', // 水球未到的背景颜色
                // opacity: 0.5
            },
            label: {
                normal: {
                    textStyle: {
                        insideColor: '#FFFFFF', //波浪划过文字颜色
                    }
                }
            }
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
})();
// 季度水球图 啦啦啦
(function () {
    var myChart = echarts.init(document.getElementById('waterChart2'));
    var option = {
        textStyle: {
            fontWeight: 'normal',
            color: '#FFFFFF', //字体颜色
            fontSize: 18,
        },
        series: [{
            type: 'liquidFill',
            name: '', // 系列名称，用于tooltip的显示，legend 的图例筛选
            radius: '70%', // 水球图的半径
            data: [0.7],
            color: ['#00FFFF'],
            outline: {
                show: true,
                // borderDistance: 0, // 边框线与图表的距离 数字
                itemStyle: {
                    // opacity: 1, // 边框的透明度   默认为 1
                    borderWidth: 3, // 边框的宽度
                    shadowBlur: 1, // 边框的阴影范围 一旦设置了内外都有阴影
                    // shadowColor: '#fff', // 边框的阴影颜色,
                    borderColor: '#254387', // 边框颜色
                }
            },
            backgroundStyle: {
                color: '#052245', // 水球未到的背景颜色
                // opacity: 0.5
            },
            label: {
                normal: {
                    textStyle: {
                        insideColor: '#FFFFFF', //波浪划过文字颜色
                    }
                }
            }
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
})();

//各省热榜
// (function () {
//     var data = [
//         { name: '可爱多', num: '9,086' },
//         { name: '娃哈哈', num: '8,341' },
//         { name: '喜之郎', num: '7,407' },
//         { name: '八喜', num: '6,080' },
//         { name: '小洋人', num: '6,724' },
//         { name: '好多鱼', num: '2,170' },
//     ]
//     $('.inner').on('mouseenter', '.sup li', function () {
//         $(this).addClass('active').siblings().removeClass('active');
//         //获取随机的值  sort方法 是给数组排序 a-b是从小到大
//         //.5-随机0-1的数 可能为正可能为负 排序就会随机
//         var radomData = data.sort(function (a, b) { return 0.5 - Math.random() });
//         var html = '';
//         radomData.forEach(function (item) {
//             html += `<li><span>${item.name}</span><span>${item.num} <s class="icon-up"></s></span></li>`;
//         });
//         //渲染
//         $('.sub').html(html);
//     });
//     $('.province .sup li').eq(0).mouseenter();
//     var index = 0;
//     var timer = setInterval(() => {
//         index++;
//         if (index > 6) {
//             index = 0;
//         }
//         $('.sup li').eq(index).mouseenter();
//     }, 2000);
// })();